import React from 'react'
import { RiCircleFill, RiCircleLine } from '@remixicon/react'
import Radio, { type RadioValue } from '@/library/gallery/components/Radio'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Space } from '@/library/gallery/components/Space'

export default (): React.ReactElement => {
  const [value, setValue] = React.useState<RadioValue>('orange')

  return (
    <>
      <DemoBlock title="基础用法">
        <Space direction="vertical" block>
          <Radio block>block</Radio>
          <Radio defaultChecked>默认选中</Radio>
        </Space>
      </DemoBlock>

      <DemoBlock title="选项组">
        <Radio.Group onChange={(v) => console.info(v)}>
          <Space block direction="vertical">
            <Radio value="1">第一项</Radio>
            <Radio value="2">第二项</Radio>
            <Radio value="3">第三项</Radio>
            {/* <Radio>第四项-undefined</Radio>
            <Radio value={null}>第五项-null</Radio> */}
          </Space>
        </Radio.Group>
      </DemoBlock>

      <DemoBlock title="选项组">
        <Radio.Group defaultValue="1">
          <Space>
            <Radio onChange={(v) => console.info(v, '第一项')} value="1">第一项</Radio>
            <Radio onChange={(v) => console.info(v, '第二项')} value="2">第二项</Radio>
            <Radio onChange={(v) => console.info(v, '第三项')} value="3">第三项</Radio>
          </Space>
        </Radio.Group>
      </DemoBlock>

      <DemoBlock title="禁用状态">
        <Radio.Group defaultValue="2">
          <Space direction="vertical">
            <Radio value="1" disabled> 第一项</Radio>
            <Radio value="2">第二项</Radio>
            <Radio value="3">第三项</Radio>
          </Space>
        </Radio.Group>
      </DemoBlock>

      <DemoBlock title="全部禁用状态">
        <Radio.Group defaultValue="3" disabled>
          <Space direction="vertical">
            <Radio value="1"> 第一项</Radio>
            <Radio value="2">第二项</Radio>
            <Radio value="3">第三项</Radio>
          </Space>
        </Radio.Group>
      </DemoBlock>

      <DemoBlock title="自定义大小">
        <Radio.Group defaultValue="middle">
          <Space direction="vertical" block>
            <Radio
              block
              value="small"
              style={{
                '--icon-size': '18px',
                '--font-size': '14px',
                '--gap': '6px',
              }}
            >
              小
            </Radio>
            <Radio
              block
              value="middle"
              style={{
                '--icon-size': '22px',
                '--font-size': '16px',
                '--gap': '8px',
              }}
            >
              中
            </Radio>
            <Radio
              block
              value="large"
              style={{
                '--icon-size': '28px',
                '--font-size': '20px',
                '--gap': '10px',
              }}
            >
              大
            </Radio>
          </Space>
        </Radio.Group>
      </DemoBlock>

      <DemoBlock title="自定义图标">
        <Radio.Group
          value={value}
          onChange={(val) => {
            setValue(val)
          }}
        >
          <Space direction="vertical">
            <Radio
              value="apple"
              // style={{ '--custom-icon-height': '12px' }}
              icon={(checked) => (checked ? (
                <RiCircleFill style={{ color: 'var(--rt-color-primary)' }} />
              ) : (
                <RiCircleLine style={{ color: 'var(--rt-color-weak)' }} />
              ))}
            >
              单选框一
            </Radio>
            <Radio
              value="orange"
              // style={{ '--custom-icon-height': '12px' }}
              icon={(checked) => (checked ? (
                <RiCircleFill style={{ color: 'var(--rt-color-primary)' }} />
              ) : (
                <RiCircleLine style={{ color: 'var(--rt-color-weak)' }} />
              ))}
            >
              单选框二
            </Radio>
          </Space>
        </Radio.Group>
      </DemoBlock>
    </>
  )
}
